{% extends "blogs/base.html" %}
{% load bootstrap3 %}

{% block javascript %}
	<link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
    integrity=
    "sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" 
    crossorigin="anonymous"
  >
  <script 
    defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" 
    integrity=
    "sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" 
    crossorigin="anonymous"
  ></script>
  <script 
    defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" 
    integrity=
    "sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" 
    crossorigin="anonymous"
  ></script>
  <script>
	window.onload = function(){
		renderMathInElement(document.getElementById("md-body"))
	}
  </script>
{% endblock javascript %}

{% block header %}
	<h2>
		<a href="{% url 'blogs:topics' %}">所有版块</a> - 
		<a href="{% url 'blogs:topic' topic.id %}">{{ topic }}</a> - 
		<a href="{% url 'blogs:blog' blog.id %}">{{ blog.title }}</a>
	</h2>
	
{% endblock header %}

{% block content %}
	<div class="panel panel-default">
		<div class="panel-heading">
			<a href="{% url 'users:homePage' blog.Owner.id %}">作者： {{ blog.Owner }}</a>
			创建时间： {{ blog.date_added }}
			{% if blog.Owner == user %}
				<a href="{% url 'blogs:edit_blog' blog.id %}">编辑</a> | <a href="{% url 'blogs:delete_blog' blog.id %}">删除</a>
			{% elif topic.Owner == user %}
				<a href="{% url 'blogs:delete_blog' blog.id %}">强制删除</a>
			{% endif %}
		</div>
		<div class="panel-body" id="md-body">
			{{ blog.text | safe }}
		</div>
	</div>
	<ul class="nav nav-pills nav-stacked">
		<div class="panel panel-default">
			<div class="panel-heading">评论区</div>
			<div class="panel-body">
				<ul class="nav nav-pills nav-stacked">
					{% for comment in comments %}
						<div class="panel panel-default">
							<div class="panel-heading">
								<a href="{% url 'users:homePage' comment.Owner.id %}">
									{% if comment.Owner == user %}
										{{ comment.Owner }}（我）
									{% else %}
										{{ comment.Owner }}
									{% endif %}
								</a>
								{{ comment.date_added }}
								{% if blog.Owner == user or user.is_superuser or comment.Owner == user %}
									<a href="{% url 'blogs:delete_comment' comment.id %}">删除</a>
								{% endif %}
							</div>
							<div class="panel-body">
								{{ comment|linebreaks }}
							</div>
						</div>
					{% empty %}
						<div class="alert alert-info">
							还没有评论噢，快来抢沙发吧！
						</div>
					{% endfor %}
				</ul>
			</div>
		</div>
	</ul>
	<form action="{% url 'blogs:comment' blog.id %}" method='post' class="form">
		{% csrf_token %}
		{% bootstrap_form form %}
		
		{% buttons %}
			<button name="submit" class="btn btn-primary">提交</button>
		{% endbuttons %}
	</form>
	
{% endblock content %}
